<nz-row>
  <div class="searchItem">
    <label for="templateName">用户名</label>
    <input id="templateName" nz-input placeholder="请输入用户名" [(ngModel)]="query.name"/>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetQuery()">重置</button>
  </div>
</nz-row>
<!--操作-->
<nz-row>
  <button nz-button nzType="primary" (click)="add()">添加</button>
</nz-row>
<!--表格-->
<nz-table
  #rowSelectionTable
  nzSize="small"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzData]="listOfData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="listOfData.total"
  [(nzPageIndex)]="query.current"
  [(nzPageSize)]="query.size"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th nzAlign="center">用户名</th>
    <th nzAlign="center">真实姓名</th>
    <th nzAlign="center">手机号</th>
    <th nzAlign="center">应用名称</th>
    <th nzAlign="center">创建时间</th>
    <th nzAlign="center" nzWidth="250px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
    <td nzAlign="center">{{ data['userName'] }}</td>
    <td nzAlign="center">{{ data['realName'] }}</td>
    <td nzAlign="center">{{ data['phone'] }}</td>
    <td nzAlign="center">{{ data['productName'] }}</td>
    <td nzAlign="center">{{ data['createTime'] }}</td>
    <td nzAlign="center">
      <a (click)="view(data)">查看</a>
      <a (click)="edit(data)">编辑</a>
      <a (click)="resetPassword(data)">重置密码</a>
      <a style="color: #F56C6C"
         nzPopconfirmPlacement="top"
         nz-popconfirm
         nzPopconfirmTitle="确认要删除该数据吗?"
         nzOkText="确认"
         nzCancelText="取消"
         (nzOnConfirm)="deleteRow(data['id'])">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>
<!--模态框-->
<nz-modal [(nzVisible)]="modal.modalVisible" [nzTitle]="modal.operationType" (nzOnCancel)="handleModalCancel()"
          [nzMaskClosable]="modal.operationType==='查看'"
          [nzOkLoading]="modal.loading" [nzOkText]="modal.operationType==='查看'?null:'保存'"
          (nzOnOk)="handleModalOk()">
  <ng-container *nzModalContent>
    <nz-row class="modalRow">
      <label for="realName"><span>*</span>姓名:</label>
      <input id="realName" nz-input placeholder="请输入姓名" [disabled]="modal.operationType==='查看'" [maxLength]="50" [(ngModel)]="formData.realName"/>
    </nz-row>
    <nz-row class="modalRow">
      <label for="phone"><span>*</span>手机号:</label>
      <input id="phone" nz-input placeholder="请输入手机号" [disabled]="modal.operationType==='查看'" [maxlength]="11" [(ngModel)]="formData.phone"/>
    </nz-row>
    <nz-row class="modalRow">
      <label for="userName"><span>*</span>用户名:</label>
      <input id="userName" nz-input placeholder="请输入用户名" [disabled]="modal.operationType==='查看'" [maxLength]="50" [(ngModel)]="formData.userName"/>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType==='添加'">
      <label for="password"><span>*</span>密码:</label>
      <input id="password" nz-input placeholder="请输入密码" [maxlength]="16" [(ngModel)]="formData.passWord"/>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType==='添加'">
      <label for="repeatPassword"><span>*</span>确认密码:</label>
      <input id="repeatPassword" nz-input placeholder="请再次输入密码" [maxlength]="16" [(ngModel)]="formData.repeatPassword"/>
    </nz-row>
    <nz-row class="modalRow" *ngIf="modal.operationType!=='查看'||modal.operationType==='查看'&&formData.productIds">
      <label for="productId">应用:</label>
      <nz-select id="productId" [(ngModel)]="formData.productIds" [disabled]="modal.operationType==='查看'" nzMode="multiple" nzPlaceHolder="请选择应用" [nzBackdrop]="true" nzShowSearch>
        <nz-option [nzValue]="app.id" [nzLabel]="app.appName" *ngFor="let app of appOptions"></nz-option>
      </nz-select>
    </nz-row>
  </ng-container>
</nz-modal>
